<template>
  <q-list dense v-for="item in showList" :key="item.id">
    <q-expansion-item
      dense
      clickable
      dense-toggle
      expand-separator
      icon="mdi-link"
      :label="item.label"
      :expand-icon-class="'hidden'"
      :header-style="headerStyleActive(item.id)"
      @click="onClick(item.id, item.label)"
    >
    </q-expansion-item>
  </q-list>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, onMounted, PropType, watch } from 'vue';

export interface CListItem {
  id: number,
  label: string
}

export default defineComponent({
  name: 'AmyListItem',
  components: {

  },

  props: {
    showList: {
      type: Array as PropType<CListItem[]>,
      require: true
    },

    selectedNode: {
      type: Number,
      require: true
    }
  },
  emits: ['update-current-item'],
  setup (props, context) {
    //数据解构
    const {
      showList,
      selectedNode
    } = toRefs(props);

    //记录当前选择项
    let selectedItem = ref<number>(0);

    //选择
    const onClick = (mid: number, name: string) => {
      selectedItem.value = mid;
      let r = {
        id: mid,
        label: name
      };

      //发送消息
      context.emit('update-current-item', r);
    }

    //当前菜单选中进入路由后状态
    const headerStyleActive = (id: number) => {
      if ((id > 0) && (selectedItem.value === id)) {
        return {
          color: '#ec4310'
        };
      } else {
        return {};
      }
    }

    //*******************************
    //      启动模块
    //*******************************
    watch(selectedNode, () => {
      if (selectedNode.value) {
        selectedItem.value = selectedNode.value;
      }
    }, { immediate: true });

    onMounted(() => {
      if (selectedNode.value) {
        selectedItem.value = selectedNode.value;
      }
    })

    return {
      showList,
      selectedItem,
      onClick,
      headerStyleActive
    };
  }
});
</script>

<style lang="scss" scoped>
  //q-expansion-item
  .main-menu{
    .q-item {
      min-height: 35px;
    }
  }

  //q-expansion-item隐藏展开图标项
  .hide-icon {
    display: inline;
  }
</style>
